// const count=100
import { useState, useRef, createContext, useContext, useEffect } from 'react'
const MsgContext = createContext()
const URL = 'http://geek.itheima.net/v1_0/channels'

function getName() {
  return 'jack'
}

const clickHandle = function (i) {
  alert('clickHandle' + i)
}
const style = {
  color: 'red',
  fontSize: '20px'
}
const list = [
  { id: 1001, name: 'vue' },
  {
    id: 1002,
    name: 'react'
  },
  {
    id: 1003,
    name: 'android'
  }
]
const Button = () => {
  return <button style={style}>click me!</button>
}
function Son(props) {
  const sonMsg = 'this is son msg'
  return (
    <div>
      <div>A:{props.name}</div>
      <button onClick={() => props.onGetSonMsg(sonMsg)}>A:sendMsg</button>
    </div>
  )
}
function Sun(props) {
  return <div>b：{props.name}</div>
}
function B() {
  const msg_b = useContext(MsgContext)

  return <div>B,{msg_b}</div>
}
function A() {
  return (
    <div>
      <B />
    </div>
  )
}
function useToggle(){
  const [info,setInfo]=useState(true)
  const toggle=()=>{
    setInfo(!info)
  }
  return {info,toggle}
}
function App() {
  const msgInfo = 'test'
  const [count, setCount] = useState(0)
  const countClick = () => {
    setCount(count + 1)
  }
  const [value, setValue] = useState('')
  const [msg, setMsg] = useState('')

  const inputRef = useRef(null)
  const showDom = () => {
    console.log(inputRef.current.value)
  }
  const getMsg = (msg) => {
    console.log(msg)
    setMsg(msg)
  }
  const [listInfo, setList] = useState([])
  useEffect(() => {
    //额外的操作，获取频道列表
    async function getList() {
      const res = await fetch(URL)
      const jsonRes = await res.json()
      setList(jsonRes.data.channels)
      console.log(jsonRes)
    }
    //消除副作用(组件卸载)
    return ()=>{
      getList()
    }
  }, [])
  const {info,toggle}=useToggle()
  return (
    <div className="App">
      this is app
      {/*使用引号传递字符串 */}
      {/* {'this is message'}
     <br/>
      {count}
      {getName()}
      {new Date().getDate()} */}
      <ul>
        {list.map((item) => (
          <li onClick={(e) => clickHandle(item.id)} key={item.id}>
            {item.name}
          </li>
        ))}
      </ul>
      <Button />
      <button onClick={countClick}>{count}</button>
      <div>
        <input value={value} onChange={(e) => setValue(e.target.value)} />
      </div>
      <div>{value}</div>
      <div>
        <input ref={inputRef} onClick={showDom} />
      </div>
      <div>
        <Son name={count} onGetSonMsg={getMsg} />
        <Sun name={msg} />
      </div>
      <MsgContext.Provider value={msgInfo}>
        <div>
          <A />
        </div>
      </MsgContext.Provider>
      <ul>
        {listInfo.map((item) => {
          return <li key={item.id}>{item.name}</li>
        })}
      </ul>
      <div>
        {info&&<div>this is div</div>}
        <button onClick={toggle}>toggle</button>
      </div>
    </div>
  )
}
export default App
